<page-bar></page-bar>
<nz-spin [nzSpinning]="userLoading">
  <div class="d-flex align-items-center py-lg mb-md border-bottom-1">
    <span>您当前的账号安全程度</span>
    <div class="pl-md width-md" style="margin-top: -4px;">
      <nz-progress nzStrokeWidth="16" [nzPercent]="process" [nzShowInfo]="false"></nz-progress>
    </div>
    <span class="px-lg">安全级别:
      <ng-container [ngSwitch]="level">
        <span *ngSwitchCase="'强'" class="text-green">强</span>
        <span *ngSwitchCase="'中'" class="text-warning">中</span>
        <span *ngSwitchDefault class="text-red">弱</span>
      </ng-container>
    </span>
  </div>
  <nz-list *ngIf="user" nzItemLayout="horizontal">
    <nz-list-item [nzActions]="[passwordOp]">
      <ng-template #passwordOp>
        <a class="brand-color" routerLink="/user/changepwd">修改</a>
      </ng-template>
      <nz-list-item-meta nzTitle="账户密码" [nzDescription]="passwordDesc">
        <ng-template #passwordDesc> 当前密码强度：<ng-container [ngSwitch]="user.secLevel">
            <span *ngSwitchCase="'强'" class="text-green">强</span>
            <span *ngSwitchCase="'中'" class="text-warning">中</span>
            <span *ngSwitchDefault class="text-red">弱</span>
          </ng-container>
        </ng-template>
      </nz-list-item-meta>
    </nz-list-item>
    <nz-list-item [nzActions]="[phoneOp]">
      <ng-template #phoneOp>
        <span [ngClass]="{'text-success': user.phone, 'text-warning': !user.phone}"><i nz-icon
            nzType="{{user.phone ? 'check-circle' : 'exclamation-circle'}}"
            class="pr-sm"></i>{{user.phone ? '已' : '未'}}设置</span>
        <nz-divider nzType="vertical"></nz-divider>
        <a routerLink="/user/secphone" class="brand-color">{{user.phone ? '修改' : '设置'}}</a>
      </ng-template>
      <nz-list-item-meta nzTitle="密保手机" [nzDescription]="phoneDesc">
        <ng-template #phoneDesc>
          {{user.phone ? ('已绑定了手机' + user.phone) : ''}}可以直接用于登录、找回密码、接收站内消息等
        </ng-template>
      </nz-list-item-meta>
    </nz-list-item>
    <nz-list-item [nzActions]="[emailOp]">
      <ng-template #emailOp>
        <span [ngClass]="{'text-success': user.secEmail, 'text-warning': !user.secEmail}"><i nz-icon
            nzType="{{user.secEmail ? 'check-circle' : 'exclamation-circle'}}"
            class="pr-sm"></i>{{user.secEmail ? '已' : '未'}}设置</span>
        <nz-divider nzType="vertical"></nz-divider>
        <a class="brand-color" (click)="msg.success('工程师努力开发中，敬请期待')">{{user.secEmail ? '修改' : '设置'}}</a>
      </ng-template>
      <nz-list-item-meta nzTitle="密保邮箱" [nzDescription]="emailDesc">
        <ng-template #emailDesc>
          {{user.secEmail ? ('已绑定了邮箱' + user.secEmail) : ''}}可以用于找回密码等
        </ng-template>
      </nz-list-item-meta>
    </nz-list-item>

  </nz-list>
</nz-spin>
